// 左rem适配  公式  浏览器窗口的宽度  / 80 + 'px'
function setFont() {
    //获取浏览器窗口的宽度
    let htmlWidth = document.querySelector('html').clientWidth
    //判断 
    if (htmlWidth < 1024) htmlWidth = 1024
    if (htmlWidth > 1920) htmlWidth = 1920
    let fontSize = htmlWidth / 80 + 'px'

    // 将计算好的值,重新赋值给浏览器
    document.querySelector('html').style.fontSize = fontSize

}

setFont() //页面刷新.立即重新计算fontSize 的值

// 自动获取浏览器的宽度,当宽度发生变化的时候,重新计算fontSize 的值
window.onresize = function () {
  setFont()
  myChart1.resize()
  myChart2.resize()
  
}
let myChart1,myChart2

let data = []
let   a=[]
let   b=[]
let   c=[]
!function rander() {    
    $('.but>input').on('click', function () {
        let username = $('.username').val()
        let score = $('.score').val()
        let salary = $('.salary').val()
        if (username===''||score === ''||salary==='') return
        let tr = `
        <tr>
           <td>${username}</td>
           <td>${score}</td>
           <td>${salary}</td>
        </tr> 
        `
        data.push({ username, score, salary })
        /* data = [
            { username: username, score: score, salary: salary }];
         */
        data.forEach(item => {
         a.push(item.username)
         b.push(item.score)
         c.push(item.salary)
        });
        data=[]
        $('.tbody').append(tr)
        $('.username').val('')
        $('.score').val('')
        $('.salary').val('')
        zhexian()
        yuanzhu()
    })
     
 }()

 //----------------------------折线图--------------------------
function zhexian() {
     myChart1 = echarts.init($('.zhexian')[0])
    let option = {
        xAxis: {
          
            axisTick: {
                // 删除刻度
                show: false
            },
            boundaryGap: true,

            type: 'category',
            data: a
        },
        yAxis: {
            type: 'value',
            axisTick: {
                // 删除刻度
                show: false
            },
            // 分割线颜色
        splitLine: {
            lineStyle: {
              color: 'transparent'
            }
          }
              
        },
        series: [{
            data:b,
            type: 'line',
            areaStyle: {},
            itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0, // x,y表示 起始点坐标
                  x2: 0,
                  y2: 1, // x2,y2 表示结束点的坐标
                  colorStops: [{
                    offset: 0, color: '#00fffb' // 0% 处的颜色(上边)
                  }, {
                    offset: 1, color: '#0061ce' // 100% 处的颜色（下边）
                  }],
                  global: false // 缺省为 false
                }
              }
        }]
    };
    myChart1.setOption(option)
}
  
 //----------------------------柱状图--------------------------
 function yuanzhu() {
     myChart2 = echarts.init($('.yuanzhu')[0])
    let option = {
        xAxis: {
            axisTick: {
                // 删除刻度
                show: false
              },
            type: 'category',
            data: a
        },
        yAxis: {

            axisTick: {
                // 删除刻度
                show: false
            },
            splitLine: {
                lineStyle: {
                  color: 'transparent'
                }
              },
            type: 'value'
        },
        series: [{
            data: c,
            type: 'bar',
            barWidth:'60px'
        }]
    }
    myChart2.setOption(option)
  }